<template>
  <a-popover position="bottom" class="" trigger="click" :popup-visible="show">
    <slot></slot>
    <template #content>
      <div class="contentOne" style="max-height:300px;overflow-y: scroll;">
        <div class="hot" v-for="(item,index) in dataList" :key="index" @click="wrongSearch(item)">
          <div style="margin: 0 10px;padding: 0 15px;text-align: left">{{ index + 1 }}</div>
          <div>
            <p>{{ item?.searchWord }}</p>
            <p>{{ item.content }}</p>
          </div>
        </div>
      </div>
    </template>
  </a-popover>
</template>

<script setup>
import {GetsearchHotApi} from "~/commonApi/api"
import {ref, watch} from "vue";
import {useRoute} from "vue-router";
import {useRouter} from "vue-router";
import {useStore} from "vuex";


const show = ref(false)


const dataList = ref([])
const getdata = async () => {
  const res = await GetsearchHotApi()
  dataList.value = res.data
}
getdata()
const route = useRoute()
const router = useRouter()
const store = useStore()
const wrongSearch = (item) => {
  if (route.path == '/seach') {
    store.dispatch('getkewords', item.searchWord)
  } else {
    router.push({path: '/seach', query: {keywords: item.searchWord}})
  }
  close()
}
const open = () => {
  show.value = true
}
const close = () => {
  show.value = false
}
defineExpose({
  open,
  close
})

</script>

<style scoped lang="scss">
.contentOne::-webkit-scrollbar {
  display: none;

}

.hot {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.hot:hover {
  background: #d9e8f6;
}
</style>